<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <el-dialog class="ba-operate-dialog" :model-value="baTable.form.operate == 'Detail' ? true : false"
        @close="baTable.toggleForm">
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">申请详情
            </div>
        </template>

        <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
            <div class="ba-operate-form" :class="'ba-' + baTable.form.operate + '-form'"
                v-if="!isEmpty(baTable.form.extend!.detail)">
                <el-descriptions :column="2" border>
                    <el-descriptions-item label="申请企业">
                        {{ baTable.form.extend!.detail.company }}
                    </el-descriptions-item>
                    <el-descriptions-item label="申请人">
                        {{ baTable.form.extend!.detail.user_id == 0 ? baTable.form.extend!.detail.name : baTable.form.extend!.detail.user.username  }}
                    </el-descriptions-item>
                    <el-descriptions-item label="手机号">
                        {{ baTable.form.extend!.detail.mobile }}
                    </el-descriptions-item>
                    <el-descriptions-item label="关联用户">
                        {{ baTable.form.extend!.detail.user_id == 0 ? '请关联用户' : baTable.form.extend!.detail.user.username}}
                    </el-descriptions-item>
                    <el-descriptions-item label="预计下载量">
                        {{ baTable.form.extend!.detail.resource }}
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" label="状态">
                        {{ baTable.form.extend!.detail.status == 1 ? '已处理' : '待处理' }}
                    </el-descriptions-item>
                    <el-descriptions-item label="操作" v-if="baTable.form.extend!.detail.status !== 1">
                        <el-button type="primary" size="small" @click="handleClick">处理</el-button>
                    </el-descriptions-item>
                </el-descriptions>

            </div>
        </el-scrollbar>

    </el-dialog>
</template>


<script setup lang="ts">
import { inject, ref } from 'vue'
import { isEmpty } from 'lodash-es'
import { ElMessage, ElMessageBox } from 'element-plus'
import baTableClass from '/@/utils/baTable'
import router from '/@/router/index'
const baTable = inject('baTable') as baTableClass
import { handleCustomer } from '/@/api/backend/customer/index'
const handleClick = () => {
    baTable.toggleForm()
    router.push({
        name: 'user/list',
        query: {
            customer_id: baTable.form.extend!.detail.id,
        },
    })




    // ElMessageBox.confirm(
    //     '是否处理',
    //     '温馨提示',
    //     {
    //         distinguishCancelAndClose: true,
    //         confirmButtonText: '确定',
    //         cancelButtonText: '取消',
    //     }
    // )
    //     .then(() => {
    //         handleCustomer(baTable.form.extend!.detail).then(res => {
    //             if(res.code == 1){
    //                 ElMessage({
    //                     type: 'success',
    //                     message: '处理成功,请前往用户列表处理关联信息',
    //                 })
    //                 baTable.onTableHeaderAction('refresh', {})
    //                 baTable.toggleForm()
    //             }
    //         })
    //     })
    //     .catch((error) => {
    //         ElMessage({
    //             type: 'info',
    //             message: '您取消了操作',
    //         })
    //     })





}



</script>

<style scoped lang="scss">
:deep(.color-red) {
    color: var(--el-color-danger) !important;
}

.table-el-tree {
    :deep(.el-tree-node) {
        white-space: unset;
    }

    :deep(.el-tree-node__content) {
        display: block;
        align-items: unset;
        height: unset;
    }
}
</style>